<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小朵游戏集合</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f8ff;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    header {
      text-align: center;
      padding: 30px 0;
      background-color: #4a86e8;
      color: white;
      border-radius: 10px;
      margin-bottom: 30px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    h1 {
      font-size: 2.5rem;
      margin: 0;
    }

    .subtitle {
      font-size: 1.2rem;
      margin-top: 10px;
      opacity: 0.9;
    }

    .games-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 30px;
    }

    .game-card {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .game-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .game-image {
      width: 100%;
      height: 180px;
      background-size: cover;
      background-position: center;
    }

    .game-info {
      padding: 20px;
    }

    .game-title {
      font-size: 1.5rem;
      margin: 0 0 10px 0;
      color: #333;
    }

    .game-description {
      color: #666;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .game-link {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4a86e8;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }

    .game-link:hover {
      background-color: #3b78de;
    }

    footer {
      text-align: center;
      margin-top: 50px;
      padding: 20px;
      color: #666;
      font-size: 0.9rem;
    }

    @media (max-width: 768px) {
      .games-grid {
        grid-template-columns: 1fr;
      }

      header {
        padding: 20px 0;
      }

      h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <h1>小朵游戏集合</h1>
      <div class="subtitle">精选有趣的浏览器小游戏</div>
    </header>

    <div class="games-grid">
      <!-- 贪吃蛇游戏 -->
      <div class="game-card">
        <div class="game-image" style="background-image: url('https://placehold.co/600x400/e9f5ff/4a86e8?text=贪吃蛇游戏');">
        </div>
        <div class="game-info">
          <h2 class="game-title">卡通贪吃蛇</h2>
          <p class="game-description">
            控制可爱的卡通蛇吃取食物，提供1-15级难度选择，拥有穿墙、特殊食物等多种游戏机制。
          </p>
          <a href="snake-game/index.html" class="game-link">开始游戏</a>
        </div>
      </div>

      <!-- 迷宫游戏 -->
      <div class="game-card">
        <div class="game-image" style="background-image: url('https://placehold.co/600x400/fff5e9/ff9800?text=迷宫游戏');">
        </div>
        <div class="game-info">
          <h2 class="game-title">小兔子走迷宫</h2>
          <p class="game-description">
            控制可爱的小兔子找到迷宫出口，提供30级难度选择，迷宫尺寸随级别增大，挑战性逐渐提升。
          </p>
          <a href="migong/index.html" class="game-link">开始游戏</a>
        </div>
      </div>

      <!-- 占位：未来游戏 -->
      <div class="game-card" style="opacity: 0.7;">
        <div class="game-image" style="background-image: url('https://placehold.co/600x400/f5f5f5/aaaaaa?text=即将推出');">
        </div>
        <div class="game-info">
          <h2 class="game-title">更多游戏</h2>
          <p class="game-description">
            更多精彩游戏正在开发中，敬请期待...
          </p>
          <span class="game-link" style="background-color: #aaa; cursor: not-allowed;">即将推出</span>
        </div>
      </div>
    </div>

    <footer>
      <p>小朵游戏集合 &copy; 2023 - 所有游戏均可在浏览器中直接运行，无需安装</p>
    </footer>
  </div>
</body>

</html>
